<template>
  <div>
    <div ref="bar" style="width:2rem;height:1.7rem"></div>
  </div>
</template>
<script>
var echarts = require("echarts/lib/echarts");
import fontSizeRem from "../utils/remtopx.js";
export default {
  props: {
    formObj: {}
  },
  data() {
    return {};
  },
  watch: {
    formObj: {
      handler(val) {
        this.$nextTick(() => {
          this.setBar();
        });
      },
      deep: true
    }
  },
  methods: {
    setBar(index) {
      var myChart = this.$echarts.init(this.$refs.bar);
      let that = this;
      let data = [
        { value: this.formObj.cycleWechatSum, name: "微信" },
        { value: this.formObj.cycleAppSum, name: "APP" },
        { value: this.formObj.cycleAppletSum, name: "小程序" },
      ];
      // 绘制图表
      myChart.setOption({
        series: [
          {
            type: "pie",
            width: "100%",
            radius: ["0%", "75%"],
            center: ["50%", "50%"],
            color: ["#FFD666", "#00D7E9","#1890FF" ],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            minAngle: 20,
            label: {
              normal: {
                show: true,
                // position: "out",
                textStyle: {
                  fontSize: fontSizeRem.fontSize(0.12), //文字的字体大小
                  // color: "#fff"
                },
                padding: [0, -30],                
                // rotate: "-45"
              }
            },
            labelLine: {
              show: false,
              length: fontSizeRem.fontSize(0.15)
            },
            data: data
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.title {
  margin-bottom: 0.26rem;
}
.tuli {
  ul {
    li {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 0.04rem 0;
      text-align: left;
      .colorBlock {
        width: 0.06rem;
        height: 0.06rem;
        margin-right: 0.05rem;
      }
      .textCon {
        margin-right: 0.05rem;
      }
    }
  }
}
</style>